<template>
  <div class="search">
    <div class="search-wrap">
      <input
        type="text"
        ref="search"
        :placeholder="placeholder"
        v-model="font"
        @input="searchInput"
      />
      <i class="clear-icon el-icon-error" @click="clearFont" v-show="font"></i>
      <i class="el-icon-search search-icon" @click="searchInput"></i>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    placeholder: String,
  },
  emits: ['inputChange'],
  setup(props, { emit }) {
    // 文本内容
    const font = ref('')
    const searchInput = () => {
      emit('inputChange', font.value)
    }
    const clearFont = () => {
      font.value = ''
    }

    return { font, searchInput, clearFont }
  },
})
</script>

<style lang="less" scoped>
.search {
  .search-wrap {
    position: relative;
    font-size: 12px;
    padding: 10px;
    width: 300px;
    background-color: #fff;
    border: 1px solid #eee;
    input {
      width: 85%;
      outline: none;
      border: none;
    }

    .search-icon {
      position: absolute;
      right: 30px;
      top: 50%;
      font-size: 19px;
      transform: translateY(-50%);
      cursor: pointer;
    }

    .clear-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      font-size: 19px;
      transform: translateY(-50%);
      cursor: pointer;
      color: #ccc;
    }
  }
}
</style>
